
import React,{Fragment} from "react";
import {Button, Form , Icon , } from "antd";
import FormInput from "../form/FormInput";
import {observer} from "mobx-react";
import FormUpload from "../form/FormUpload";
import FormShowPic from "../form/FormShowPic";
import FormMulInput from "../form/FormMulInput";
import FormSelect from "../form/FormSelect";
import FormMulSelect from "../form/FormMulSelect";
import FormTimePicker from "../form/FormTimePicker";
import FormDatePicker from "../form/FormDatePicker";
import FormMonthPicker from "../form/FormMonthPicker";
import FormYearPicker from "../form/FormYearPicker";
import FormRadio from "../form/FormRadio";
import FormCheckBox from "../form/FormCheckBox";
import FormPointPicker from "../form/FormPointPicker";
import FormPasswordInput from "../form/FormPasswordInput";
import FormTimeRangePicker from "../form/FormTimeRangePicker"
import FormDateRangePicker from "../form/FormDateRangePicker"
import FormMonthRangePicker from "../form/FormMonthRangePicker"
import FormYearRangePicker from "../form/FormYearRangePicker"
import FormTreeSelect from "../form/FormTreeSelect"
import FormText from "../form/FormText"
import FormCart from "../form/FormCart"
import FormSignName from "../form/FormSignName"
import {urlEncode} from "../../libs/funcs";


let id = 0;

/**
 * 根据配置渲染的表单组件
 */
@observer
class ActionFormMyXuanJian extends React.Component{
    constructor(props) {
        super(props);
        this.state = {
            href:""
        }
    }

    remove = k => {
        const { form } = this.props;
        // can use data-binding to get
        const keys = form.getFieldValue('keys');
        // We need at least one passenger
        if (keys.length === 1) {
            return;
        }

        // can use data-binding to set
        form.setFieldsValue({
            keys: keys.filter(key => key !== k),
        });
    };

    add = () => {
        const { form } = this.props;
        // can use data-binding to get
        const keys = form.getFieldValue('keys');
        const nextKeys = keys.concat(id++);
        // can use data-binding to set
        // important! notify form to detect changes
        form.setFieldsValue({
            keys: nextKeys,
        });
    };

    handleButtonClick = (href,name) => {
        this.props.form.validateFields((err, formData) => {
            if (!err){
                this.setState({
                    href:href + `?${name}=1` + urlEncode(formData)
                });
            }
        });
    };

    render() {
        const {config, form_my_xuan_jian_store} = this.props;
        const { getFieldDecorator, getFieldValue } = this.props.form;
        const add_config = form_my_xuan_jian_store.add_config;
        console.log(add_config);
        getFieldDecorator('keys', { initialValue: [] });
        const keys = getFieldValue('keys');
        const formItems = keys.map((k, i) => {
            const ext = keys.length > 1 ? (<div>
                    <span  onClick={() => this.remove(k)}>删除选项组【{k+1}】</span>
                    <Icon  onClick={() => this.remove(k)}
                        className="dynamic-delete-button"
                        type="minus-circle-o"
                    />
                </div>
            ) : null;

            return <div><div style={{ textAlign: 'right' }}>{ext}</div>{add_config.fields.map((item,index)=>{
                const field = `f${k}[${item["field"]}]`;
                let targetItems ;
                let changeValueAction;
                if(item["changeValueAction"]){
                    changeValueAction = item["changeValueAction"];
                    targetItems = item["changeValueAction"]["target"].map((v2,k2)=>{
                        return {
                            id:v2,
                            name:`f${k}[${v2}]`
                        }
                    })
                }
                if (item["component"] === "FormUpload"){
                    console.log(item["single"],"--------------------")
                    return <div><FormUpload form_my_xuan_jian_store={form_my_xuan_jian_store} key={index} form={this.props.form} field={field}  label={item["label"]} single={item["single"]} fileType={item["fileType"]} initialValue={item["initialValue"]} rules={item["rules"]}  disabled={item["disabled"]} readonly={item["readonly"]}/></div>
                }if (item["component"] === "FormShowPic"){
                    return <div><FormShowPic form_my_xuan_jian_store={form_my_xuan_jian_store} key={index} form={this.props.form} field={field}  label={item["label"]} single={item["single"]} fileType={item["fileType"]} initialValue={item["initialValue"]} rules={item["rules"]}  disabled={item["disabled"]} readonly={item["readonly"]}/></div>
                }else if (item["component"] === "FormInput"){
                    return <div><FormInput form_my_xuan_jian_store={form_my_xuan_jian_store} key={index} form={this.props.form} label={item["label"]} field={field} allowClear={item["allowClear"]} placeholder={item["placeholder"]} initialValue={item["initialValue"]} rules={item["rules"]}  disabled={item["disabled"]} readonly={item["readonly"]} addonAfter={item["addonAfter"]} addonBefore={item["addonBefore"]}/></div>
                }else if (item["component"] === "FormMulInput"){
                    return <div><FormMulInput form_my_xuan_jian_store={form_my_xuan_jian_store} key={index} form={this.props.form} label={item["label"]} field={field}  placeholder={item["placeholder"]} rows={item["rows"]} allowClear={item["allowClear"]} initialValue={item["initialValue"]} rules={item["rules"]} disabled={item["disabled"]} readonly={item["readonly"]}/></div>
                }else if (item["component"] === "FormSelect"){
                    return <div><FormSelect form_my_xuan_jian_store={form_my_xuan_jian_store} targetItems={targetItems} changeValueAction={changeValueAction} key={index} form={this.props.form} label={item["label"]} field={field} options={item["options"]} allowClear={item["allowClear"]} showSearch={item["showSearch"]} placeholder={item["placeholder"]} initialValue={item["initialValue"]} rules={item["rules"]}  disabled={item["disabled"]} readonly={item["readonly"]}/></div>
                }else if (item["component"] === "FormMulSelect"){
                    return <div><FormMulSelect form_my_xuan_jian_store={form_my_xuan_jian_store} key={index} form={this.props.form} label={item["label"]} field={field} options={item["options"]} showSearch={item["showSearch"]} placeholder={item["placeholder"]} allowClear={item["allowClear"]} initialValue={item["initialValue"]} rules={item["rules"]} disabled={item["disabled"]} readonly={item["readonly"]} /></div>
                }else if (item["component"] === "FormTimePicker"){
                    return <div><FormTimePicker form_my_xuan_jian_store={form_my_xuan_jian_store} key={index} form={this.props.form}  label={item["label"]} field={field} disabled={item["disabled"]} readonly={item["readonly"]} placeholder={item["placeholder"]} initialValue={item["initialValue"]} rules={item["rules"]}/></div>
                }else if (item["component"] === "FormDatePicker"){
                    return <div><FormDatePicker form_my_xuan_jian_store={form_my_xuan_jian_store} key={index} form={this.props.form} label={item["label"]} field={field} disabled={item["disabled"]} readonly={item["readonly"]} placeholder={item["placeholder"]} initialValue={item["initialValue"]} rules={item["rules"]}/></div>
                }else if (item["component"] === "FormMonthPicker"){
                    return <div><FormMonthPicker form_my_xuan_jian_store={form_my_xuan_jian_store} key={index} form={this.props.form} label={item["label"]} field={field} disabled={item["disabled"]} readonly={item["readonly"]} placeholder={item["placeholder"]} initialValue={item["initialValue"]} rules={item["rules"]}/></div>
                }else if (item["component"] === "FormYearPicker"){
                    return <div><FormYearPicker form_my_xuan_jian_store={form_my_xuan_jian_store} key={index} form={this.props.form} label={item["label"]} field={field} disabled={item["disabled"]} readonly={item["readonly"]} placeholder={item["placeholder"]} initialValue={item["initialValue"]} rules={item["rules"]} /></div>
                }else if (item["component"] === "FormRadio"){
                    return <div><FormRadio form_my_xuan_jian_store={form_my_xuan_jian_store} key={index} form={this.props.form} label={item["label"]} field={field} options={item["options"]} initialValue={item["initialValue"]} rules={item["rules"]}  disabled={item["disabled"]} readonly={item["readonly"]}/></div>
                }else if (item["component"] === "FormCheckBox"){
                    return <div><FormCheckBox form_my_xuan_jian_store={form_my_xuan_jian_store} key={index} form={this.props.form} label={item["label"]} field={field} options={item["options"]} initialValue={item["initialValue"]} rules={item["rules"]}  disabled={item["disabled"]} readonly={item["readonly"]}/></div>
                }else if (item["component"] === "FormPointPicker"){
                    return <div><FormPointPicker form_my_xuan_jian_store={form_my_xuan_jian_store} key={index} form={this.props.form} placeholder={item["placeholder"]} field={field} initialValue={item["initialValue"]} rules={item["rules"]}  disabled={item["disabled"]} readonly={item["readonly"]}/></div>
                }else if (item["component"] === "FormPasswordInput"){
                    return <div><FormPasswordInput form_my_xuan_jian_store={form_my_xuan_jian_store} key={index} form={this.props.form} label={item["label"]} field={field} allowClear={item["allowClear"]} placeholder={item["placeholder"]} initialValue={item["initialValue"]} rules={item["rules"]} disabled={item["disabled"]} readonly={item["readonly"]}/></div>
                }else if (item["component"] === "FormTimeRangePicker"){
                    return <div><FormTimeRangePicker form_my_xuan_jian_store={form_my_xuan_jian_store} key={index} form={this.props.form} label={item["label"]} disabled={item["disabled"]} readonly={item["readonly"]} field={field} allowClear={item["allowClear"]} placeholder={item["placeholder"]} start={item["start"]} end={item["end"]} rules={item["rules"]}/></div>
                }else if (item["component"] === "FormDateRangePicker"){
                    return <div><FormDateRangePicker form_my_xuan_jian_store={form_my_xuan_jian_store} key={index} form={this.props.form} label={item["label"]} disabled={item["disabled"]} readonly={item["readonly"]} field={field} allowClear={item["allowClear"]} placeholder={item["placeholder"]} start={item["start"]} end={item["end"]} rules={item["rules"]}/></div>
                }else if (item["component"] === "FormMonthRangePicker"){
                    return <div><FormMonthRangePicker form_my_xuan_jian_store={form_my_xuan_jian_store} key={index} form={this.props.form} label={item["label"]} disabled={item["disabled"]} readonly={item["readonly"]} field={field} allowClear={item["allowClear"]} placeholder={item["placeholder"]} start={item["start"]} end={item["end"]} rules={item["rules"]}/></div>
                }else if (item["component"] === "FormYearRangePicker"){
                    return <div><FormYearRangePicker form_my_xuan_jian_store={form_my_xuan_jian_store} key={index} form={this.props.form} label={item["label"]} disabled={item["disabled"]} readonly={item["readonly"]} field={field} allowClear={item["allowClear"]} placeholder={item["placeholder"]} start={item["start"]} end={item["end"]} rules={item["rules"]}/></div>
                }else if(item["component"] === "FormTreeSelect"){
                    return <div><FormTreeSelect form_my_xuan_jian_store={form_my_xuan_jian_store} targetItems={targetItems} multiple={item["multiple"]} treeCheckable={item["treeCheckable"]} changeValueAction={changeValueAction} key={index} form={this.props.form} label={item["label"]}  treeData={item["options"]}  initialValue={item["initialValue"]} disabled={item["disabled"]} readonly={item["readonly"]} field={field} allowClear={item["allowClear"]} placeholder={item["placeholder"]} rules={item["rules"]} showLeafOnly={item["showLeafOnly"]} ext_config={item["ext_config"]}/></div>
                }else if (item["component"] === "FormText"){
                    return <div><FormText options={item["options"]} form_my_xuan_jian_store={form_my_xuan_jian_store} key={index} form={this.props.form} label={item["label"]} field={field} allowClear={item["allowClear"]} placeholder={item["placeholder"]} initialValue={item["initialValue"]} rules={item["rules"]}  disabled={item["disabled"]} readonly={item["readonly"]} addonAfter={item["addonAfter"]} addonBefore={item["addonBefore"]}/></div>
                }else if (item["component"] === "BUTTON"){
                    return <div><div key={index} style={{width:528,margin:"0 auto"}}><Button href={this.state.href} icon={item["icon"]} size={item["size"]} target={item["target"]} type={item["type"]} block={item["block"]} onClick={(e) => {this.handleButtonClick(item["href"],item["name"]);return false;}}>{item["label"]}</Button></div></div>
                }else if (item["component"] === "FormCart"){
                    return <div><FormCart form_my_xuan_jian_store={form_my_xuan_jian_store} key={index} form={this.props.form} label={item["label"]} field={field} allowClear={item["allowClear"]} placeholder={item["placeholder"]} initialValue={item["initialValue"]} rules={item["rules"]}  disabled={item["disabled"]}  readonly={item["readonly"]} addonAfter={item["addonAfter"]} /></div>
                }else if (item["component"] === "FormSignName"){
                    return <div><FormSignName form_my_xuan_jian_store={form_my_xuan_jian_store} key={index} form={this.props.form} label={item["label"]} field={field} allowClear={item["allowClear"]} placeholder={item["placeholder"]} initialValue={item["initialValue"]} rules={item["rules"]}  disabled={item["disabled"]} readonly={item["readonly"]}/></div>
                }else {
                    return <div><FormInput form_my_xuan_jian_store={form_my_xuan_jian_store} key={index} form={this.props.form} label={item["label"]} field={field} allowClear={item["allowClear"]} placeholder={item["placeholder"]} initialValue={item["initialValue"]} rules={item["rules"]} disabled={item["disabled"]} readonly={item["readonly"]}/></div>
                }
            })}</div>
        });
        return (
            <Fragment>
                <Form labelCol={{span: 6}} wrapperCol={{span: 14}}>
                    {config.map((item,index) => {
                        if (item["component"] === "FormUpload"){
                            console.log(item["single"],"--------------------")
                            return <FormUpload key={index} form={this.props.form} field={item["field"]}  label={item["label"]} single={item["single"]} fileType={item["fileType"]} initialValue={item["initialValue"]} rules={item["rules"]}  disabled={item["disabled"]}/>
                        }if (item["component"] === "FormShowPic"){
                            return <FormShowPic key={index} form={this.props.form} field={item["field"]}  label={item["label"]} single={item["single"]} fileType={item["fileType"]} initialValue={item["initialValue"]} rules={item["rules"]}  disabled={item["disabled"]}/>
                        }else if (item["component"] === "FormInput"){
                            return <FormInput key={index} form={this.props.form} label={item["label"]} field={item["field"]} allowClear={item["allowClear"]} placeholder={item["placeholder"]} initialValue={item["initialValue"]} rules={item["rules"]}  disabled={item["disabled"]} addonAfter={item["addonAfter"]} addonBefore={item["addonBefore"]}/>
                        }else if (item["component"] === "FormMulInput"){
                            return <FormMulInput key={index} form={this.props.form} label={item["label"]} field={item["field"]}  placeholder={item["placeholder"]} rows={item["rows"]} allowClear={item["allowClear"]} initialValue={item["initialValue"]} rules={item["rules"]} disabled={item["disabled"]}/>
                        }else if (item["component"] === "FormSelect"){
                            return <FormSelect key={index} form={this.props.form} label={item["label"]} field={item["field"]} options={item["options"]} allowClear={item["allowClear"]} showSearch={item["showSearch"]} placeholder={item["placeholder"]} initialValue={item["initialValue"]} rules={item["rules"]}  disabled={item["disabled"]}/>
                        }else if (item["component"] === "FormMulSelect"){
                            return <FormMulSelect key={index} form={this.props.form} label={item["label"]} field={item["field"]} options={item["options"]} showSearch={item["showSearch"]} placeholder={item["placeholder"]} allowClear={item["allowClear"]} initialValue={item["initialValue"]} rules={item["rules"]} disabled={item["disabled"]} />
                        }else if (item["component"] === "FormTimePicker"){
                            return <FormTimePicker key={index} form={this.props.form}  label={item["label"]} field={item["field"]} disabled={item["disabled"]} placeholder={item["placeholder"]} initialValue={item["initialValue"]} rules={item["rules"]}/>
                        }else if (item["component"] === "FormDatePicker"){
                            return <FormDatePicker key={index} form={this.props.form} label={item["label"]} field={item["field"]} disabled={item["disabled"]} placeholder={item["placeholder"]} initialValue={item["initialValue"]} rules={item["rules"]}/>
                        }else if (item["component"] === "FormMonthPicker"){
                            return <FormMonthPicker key={index} form={this.props.form} label={item["label"]} field={item["field"]} disabled={item["disabled"]} placeholder={item["placeholder"]} initialValue={item["initialValue"]} rules={item["rules"]}/>
                        }else if (item["component"] === "FormYearPicker"){
                            return <FormYearPicker key={index} form={this.props.form} label={item["label"]} field={item["field"]} disabled={item["disabled"]} placeholder={item["placeholder"]} initialValue={item["initialValue"]} rules={item["rules"]} />
                        }else if (item["component"] === "FormRadio"){
                            return <FormRadio key={index} form={this.props.form} label={item["label"]} field={item["field"]} options={item["options"]} initialValue={item["initialValue"]} rules={item["rules"]}  disabled={item["disabled"]}/>
                        }else if (item["component"] === "FormCheckBox"){
                            return <FormCheckBox key={index} form={this.props.form} label={item["label"]} field={item["field"]} options={item["options"]} initialValue={item["initialValue"]} rules={item["rules"]}  disabled={item["disabled"]}/>
                        }else if (item["component"] === "FormPointPicker"){
                            return <FormPointPicker key={index} form={this.props.form} placeholder={item["placeholder"]} field={item["field"]} initialValue={item["initialValue"]} rules={item["rules"]}  disabled={item["disabled"]}/>
                        }else if (item["component"] === "FormPasswordInput"){
                            return <FormPasswordInput key={index} form={this.props.form} label={item["label"]} field={item["field"]} allowClear={item["allowClear"]} placeholder={item["placeholder"]} initialValue={item["initialValue"]} rules={item["rules"]} disabled={item["disabled"]}/>
                        }else if (item["component"] === "FormTimeRangePicker"){
                            return <FormTimeRangePicker key={index} form={this.props.form} label={item["label"]} disabled={item["disabled"]} field={item["field"]} allowClear={item["allowClear"]} placeholder={item["placeholder"]} start={item["start"]} end={item["end"]} rules={item["rules"]}/>
                        }else if (item["component"] === "FormDateRangePicker"){
                            return <FormDateRangePicker key={index} form={this.props.form} label={item["label"]} disabled={item["disabled"]} field={item["field"]} allowClear={item["allowClear"]} placeholder={item["placeholder"]} start={item["start"]} end={item["end"]} rules={item["rules"]}/>
                        }else if (item["component"] === "FormMonthRangePicker"){
                            return <FormMonthRangePicker key={index} form={this.props.form} label={item["label"]} disabled={item["disabled"]} field={item["field"]} allowClear={item["allowClear"]} placeholder={item["placeholder"]} start={item["start"]} end={item["end"]} rules={item["rules"]}/>
                        }else if (item["component"] === "FormYearRangePicker"){
                            return <FormYearRangePicker key={index} form={this.props.form} label={item["label"]} disabled={item["disabled"]} field={item["field"]} allowClear={item["allowClear"]} placeholder={item["placeholder"]} start={item["start"]} end={item["end"]} rules={item["rules"]}/>
                        }else if(item["component"] === "FormTreeSelect"){
                            return <FormTreeSelect key={index} form={this.props.form} label={item["label"]}  multiple={item["multiple"]} treeCheckable={item["treeCheckable"]} treeData={item["options"]}  initialValue={item["initialValue"]} disabled={item["disabled"]} field={item["field"]} allowClear={item["allowClear"]} placeholder={item["placeholder"]} rules={item["rules"]} showLeafOnly={item["showLeafOnly"]} ext_config={item["ext_config"]}/>
                        }else if (item["component"] === "FormText"){
                            return <FormText options={item["options"]} key={index} form={this.props.form} label={item["label"]} field={item["field"]} allowClear={item["allowClear"]} placeholder={item["placeholder"]} initialValue={item["initialValue"]} rules={item["rules"]}  disabled={item["disabled"]} addonAfter={item["addonAfter"]} addonBefore={item["addonBefore"]}/>
                        }else if (item["component"] === "BUTTON"){
                            return <div key={index} style={{width:528,margin:"0 auto"}}><Button href={this.state.href} icon={item["icon"]} size={item["size"]} target={item["target"]} type={item["type"]} block={item["block"]} onClick={(e) => {this.handleButtonClick(item["href"],item["name"]);return false;}}>{item["label"]}</Button></div>
                        }else if (item["component"] === "FormCart"){
                            return <FormCart key={index} form={this.props.form} label={item["label"]} field={item["field"]} allowClear={item["allowClear"]} placeholder={item["placeholder"]} initialValue={item["initialValue"]} rules={item["rules"]}  disabled={item["disabled"]}  addonAfter={item["addonAfter"]} />
                        }else if (item["component"] === "FormSignName"){
                            return <FormSignName key={index} form={this.props.form} label={item["label"]} field={item["field"]} allowClear={item["allowClear"]} placeholder={item["placeholder"]} initialValue={item["initialValue"]} rules={item["rules"]}  disabled={item["disabled"]}/>
                        }else {
                            return <FormInput key={index} form={this.props.form} label={item["label"]} field={item["field"]} allowClear={item["allowClear"]} placeholder={item["placeholder"]} initialValue={item["initialValue"]} rules={item["rules"]} disabled={item["disabled"]}/>
                        }
                    })}

                    { formItems }
                    {
                        <Form.Item label={" "}>
                            <div style={{ textAlign: 'center' }}>
                                <Button type="dashed" onClick={this.add} style={{ width: '60%' }}>
                                    <Icon type="plus" /> {add_config.label}
                                </Button>
                            </div>
                        </Form.Item>
                    }
                </Form>
            </Fragment>
        )
    }
}
export default ActionFormMyXuanJian

